<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="consult-item">
    <view class="consult-item-wrapper">
      <view class="consult-item-tag">问</view>
      <view class="consult-item-text">{{ info.question }}</view>
    </view>
    <view class="consult-item-wrapper" v-if="info.reply_content">
      <view class="consult-item-tag2">答</view>
      <view class="consult-item-text">{{ info.reply_content }}</view>
    </view>
  </view>
</template>

<style lang="scss">
.consult-item {
  .consult-item-wrapper {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
  }

  .consult-item-tag,
  .consult-item-tag2 {
    flex-shrink: 0;
    width: 40rpx;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 40rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 10rpx 10rpx 0 10rpx;
    background: linear-gradient(158deg, #21d177 0%, #1bc76f 100%);
  }

  .consult-item-text {
    flex-grow: 1;
    min-width: 0;
    margin-left: 12rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 42rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .consult-item-tag2 {
    background: linear-gradient(158deg, #ffb02b 0%, #ff9728 100%);
  }
}
</style>
